---
import logoWhite from "@/assets/icon/logo.png";
import RightNav from "./RightNav";
import MobileRightNav from "./MobileRightNav";
import wikiConfig from "wiki.config";
import { Image } from "astro:assets";

const { HeaderTitle } = wikiConfig;
---

<header
  id="header"
  class="fixed top-0 z-[100] w-screen h-14 bg-black/50 backdrop-blur-[10px] flex flex-row-reverse md:flex-row justify-between px-4 md:px-9"
>
  <a
    href="/wiki"
    class="h-full relative z-10 flex gap-3 items-center md:justify-start mx-auto md:mx-0 md:pr-8"
  >
    <Image src={logoWhite} alt="" width={50} />
    <h2 class="hidden md:flex items-center text-2xl">
      <p>{HeaderTitle}</p>
    </h2>
  </a>
  <div class="h-full flex gap-8 items-center relative w-0 md:w-auto">
    <RightNav
      client:media="(min-width: 993px)"
      transition:persist="right-nav"
    />
    <MobileRightNav client:media="(max-width: 992px)" />
  </div>
</header>
